<template>
  	<div id="setInfo">
  		<!-- 开始时间选择 -->
        <div class='mc' v-show='isTime' @click.stop='toggle(0)'></div>
        <div class='datetime'>
            <div class='top'>
                <a @click.stop='toggle(0)'>取消</a>
                <a @click.stop='sureTime'>确定</a>
            </div>
            <mt-picker :slots="slotsTime" @change="onValuesChangeTime"></mt-picker>
        </div>
  		<header>
  			<i @click="goBack()"></i>
  			<div>设置信息</div>
  		</header>
  		<div class="border-8"></div>

    	<ul class='single'>
	  		<li>
	  			<a>
					<label>课程标题:</label>
		 			<input type="text" placeholder="请输入直播主题" v-model='infoObj.course_name' />
	  			</a>
	  		</li>
	  		<li @click='toggle(1)'>
	  			<a>
					<label>开始时间:</label>
		 			<div class='time2' v-show='showTime'>{{infoObj.starttime}}</div>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a>
					<label>课程介绍:</label>
		 			<input type="text" placeholder="编辑课程介绍内容" v-model='infoObj.program' />
	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li>
	  			<a class="descTitle">
					<label>封面</label>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a class="uploadImg">
					<div class="img" v-if="isShow">
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="infoObj.course_pic" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile1" />
					</div>

	  			</a>
	  		</li>
	  		<div class="border-16"></div>
	  		<!-- <li>
	  			<a class="descTitle">
					<label>上传图片课件</label>
	  			</a>
	  		</li> -->
	  		<!-- <li class='no-border'>
	  			<a class="uploadImg">
					<div class="img" v-if="isShow">
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="picCourse" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile2" />
					</div>

	  			</a>
	  		</li> -->
	  		<!-- <div class="border-8"></div> -->
	  		<!-- <li class='no-border'>
	  			<a class="type">
					<span>
						是否显示课件:
					</span>
					<label @click="type()">
						<input type="radio" v-model="showClass" value='不显示'>
						<i></i>
		 				<span>不显示</i></span>
					</label>
					<label @click="type()">
						<input type="radio" v-model="showClass" value='显示'>
						<i></i>
		 				<span>显示</i></span>
					</label>
	  			</a>
	  		</li> -->
	  		<li>
	  			<a @click='preserve' class="preserve">
	  				保 存
	  			</a>
	  		</li>
	  	</ul>
	</div>
</template>
<script>
	import { Indicator } from 'mint-ui';
	import { DatetimePicker } from 'mint-ui';
	export default {
		data() {
			return {
				cid: '',
				isShow: true,   //
				//单节课
				infoObj: {
                   
                },  //课程信息
				// picCourse: '', //图片课件
				// showClass: '',  //是否显示课件
				isTime: false,  //是否显示时间选择器
                valuestime: '',  //就诊时间选择但未确定时的选项
                slotsTime: [
                    {
                        flex: 1,
                        values: function() {
                            const date=new Date();
                            const year = date.getFullYear(); 
                            const yearArr = [];
                            for(var i = year;i< year+10;i++) {
                                yearArr.push(i);
                            }
                            return yearArr;
                        }(),
                        className: 'slot1',
                        textAlign: 'center'
                    }, 
                    {
                        flex: 1,
                        values: function() {
                            const monthArr = [];
                            for(var i = 1;i< 13;i++) {
                                if(i < 10) {
                                    monthArr.push('0' + i);
                                } else {
                                    monthArr.push(i);
                                }
                                
                            }
                            return monthArr;
                        }(),
                        className: 'slot2',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const dayArr = [];
                            for(var i = 1;i< 32;i++) {
                                if(i < 10) {
                                    dayArr.push('0' + i);
                                } else {
                                    dayArr.push(i);
                                }
                                
                            }
                            return dayArr;
                        }(),
                        className: 'slot3',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const hourArr = [];
                            for(var i = 0;i< 24;i++) {
                                if(i < 10) {
                                    hourArr.push('0' + i);
                                } else {
                                    hourArr.push(i);
                                }
                                
                            }
                            return hourArr;
                        }(),
                        className: 'slot4',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const minArr = [];
                            for(var i = 0;i< 60;i++) {
                                if(i < 10) {
                                    minArr.push('0' + i);
                                } else {
                                    minArr.push(i);
                                }  
                            }
                            return minArr;
                        }(),
                        className: 'slot5',
                        textAlign: 'center'
                    }
                ],
				showTime: true,  //开播时间

			}
		},
		components: {

		},
		methods: {
            // 控制日期选择器显示隐藏动画
            toggle(status) {  //status 0隐藏 1显示
				if(status) {
					this.isTime=true;
					$(".datetime").addClass("up").removeClass("down");
				}else {
					$(".datetime").addClass("down").removeClass("up");
                    this.isTime=false;
                    
				}
			},
            //就诊时间
            onValuesChangeTime(picker, values) {
                this.valuestime = values[0] + '-' +values[1] + '-' +values[2] + ' ' +values[3] + ':' +values[4];
                console.log(values);
                function mGetDate(year, month){
                    var d = new Date(year, month, 0);
                    return d.getDate();
                }
                var totalDay = mGetDate(values[0],values[1]);  
        
                const dayArr = [];
                for(var i=1;i<totalDay+1;i++) {
                    if(i < 10) {
                        dayArr.push('0' + i);
                    } else {
                        dayArr.push(i);
                    }
                }
                
                picker.setSlotValues(2, dayArr)
            },
            //确定就诊时间
            sureTime() {
                this.infoObj.starttime = this.valuestime;
                this.toggle(0);
            },

			//初始化显示原来课程信息
			init() {
				// var singleClass = JSON.parse(localStorage.getItem('singleClass'));
				// this.picCourse = singleClass.picCourse;
				// this.showClass = singleClass.showClass;
				//获取课程详情
				this.cid = this.$route.query.id;
				this.$api.get(this.$api.baseURLSchool,"select_cid/view_course_user/"+this.cid,{},r => {
					console.log(r);
					this.infoObj = r.data.info;
				},err => {
					console.log(err);
				})
			},
			//保存修改的课程信息
			preserve() {
				if(this.infoObj.course_name&&this.infoObj.starttime&&this.infoObj.program&&this.infoObj.course_pic) {
					console.log(this.infoObj);
					this.$api.post(this.$api.baseURLSchool,"updatedata/course/edit",this.infoObj,r => {
						console.log(r);
						this.$router.back();
					},err => {
						console.log(err);
					})
				}
			},
			goBack() {
				this.$router.back();
			},
			openPicker() {
		        this.$refs.picker.open();
		    },
		    type() {

		    },
		    liveType() {

		    },
		    checkNum(e){   //只能输入数字
		        var value = e.target.value;
		        e.target.value = value.replace(/[^\d]/g, '');
		        this.classNum = e.target.value;
	        },
		    testClassNum() {
		    	if(this.classNum<2||this.classNum>200) {
					this.$utils._toast('请输入2-100的正整数');
		    	}
		    },
		   
			delSelectImg() {
				this.isShow = false;
			},
			upfile1: function() {
				var file = $(".upfile")[0].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.infoObj.course_pic = result;
					// result = result.substring(result.indexOf(",") + 1, result.length - 1);
					// console.log(result);
					// Indicator.open({
					// 	text: '上传中...',
					// 	spinnerType: 'fading-circle'
					// });
				}
			},
			upfile2: function() {
				var file = $(".upfile")[1].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.picCourse = result;
					// result = result.substring(result.indexOf(",") + 1, result.length - 1);
					// console.log(result);
					// Indicator.open({
					// 	text: '上传中...',
					// 	spinnerType: 'fading-circle'
					// });
				}
			},
		},
		created() {
			this.init();
		},
		mounted() {
			
		}
	}
</script>
<style lang="scss">
</style>
